<!--
 * @Descripttion: 需求管理
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-08-05 14:18:34
 * @LastEditors: GW
 * @LastEditTime: 2021-09-04 15:26:49
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!--按钮-->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="initDataForm">
                                <a-icon class="btns-icon" type="save" />
                                <div class="btns-text">初始化表</div>
                            </div>
                        </a-col>
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="syncFun">
                                <a-icon class="btns-icon" type="file-sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                        <!-- 需求文档 -->
                        <a-col v-if="activeKey == 6" :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="handleSave">
                                <a-icon class="btns-icon" type="save" />
                                <div class="btns-text">保存</div>
                            </div>
                        </a-col>
                        <!-- 数据表 -->
                        <!-- <a-col v-if="activeKey == 1" :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="filedSave">
                                <a-icon class="btns-icon" type="save" />
                                <div class="btns-text">保存</div>
                            </div>
                        </a-col>
                        <a-col v-if="activeKey == 1" :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="filedEdit(2)">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>
                        <a-col v-if="activeKey == 1" :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="filedEdit(1)">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col v-if="activeKey == 1" :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="filedDelete">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col> -->

                        <!-- 中间2-5 -->
                        <a-col v-show="activeKey >= 2 && activeKey <6" :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="handleAddAndEdit(1)">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                    </a-col>
                    <a-col :span="12" style="text-align:right">
                        <span style="font-size:14px;line-height:32px;">选择项目:</span>
                        <a-select style="width:220px" v-if="projectData.length > 0" label-in-value @change="projectChange" :default-value="projectChecked">
                            <a-select-option v-for="item in projectData" :key="item.id" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-col>
                </a-row>
            </div>
            <section class="content-demand-wrapper">
                <!--菜单-->
                <!-- <a-table :columns="filedColumns" :data-source="filedData" :row-selection="{ selectedRowKeys: selectedKeysFiled, onChange: onSelectChangeFiled,columnWidth:40 }" :scroll="{x:500,y:450}" :pagination="false" bordered>
                </a-table> -->
                <section class="content-menu" :style="menuStyle">
                    <!-- <div class="menu-btn-box">
                        <a-button style="border:0px;" type="">新增</a-button>
                        <a-button style="border:0px;">修改</a-button>
                        <a-button style="border:0px;">删除</a-button>
                    </div> -->
                    <!--收缩按钮-->
                    <div class="shrink-btn" @click="clickShrink">
                        <a-icon v-if="menuStyleStatus" class="" type="double-left" />
                        <a-icon v-else class="" type="double-right" />
                    </div>
                    <div class="menu-tree-box" :style="munuTreeStyle">
                        <!-- :default-selected-keys="['请购单']" -->
                        <a-tree :tree-data="treeMenu" show-icon default-expand-all @select="onSelect" :selected-keys="selectedTreeKeys">

                        </a-tree>
                    </div>

                </section>
                <!--标签切换-->
                <section class="content-view">
                    <a-tabs :activeKey="activeKey" @change="tabsCallback" style="height:100%;">
                        <a-tab-pane key="1" tab="数据表">
                            <!-- 列表 -->
                            <div style="width:100%;">
                                <div style="float:left;width:350px">
                                    <div class="margin-bottom-10">
                                        <a-button class="margin-right-10" @click="formEdit(0)">匹配表</a-button>
                                        <a-button class="margin-right-10" @click="formEdit(1)">新增表</a-button>
                                        <a-button class="margin-right-10" @click="formEdit(2)">修改表</a-button>
                                        <!-- <a-button class="margin-right-10" @click="formSave">保存表</a-button> -->
                                        <a-button class="margin-right-10" @click="formDelete">删除表</a-button>
                                    </div>
                                    <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,columnWidth:20 }" -->
                                    <a-table style="cursor:pointer" :columns="columns" :components="components" :data-source="formData" :scroll="{ y: 500,x:0}" :customRow="customClick" :rowClassName="rowClassName" :pagination="false" bordered></a-table>
                                </div>
                                <div class="filed-table" style="float:left;width:calc(100% - 350px);">
                                    <div class="margin-bottom-10">
                                        <a-button class="margin-right-10" @click="filedEdit(1)">新增字段</a-button>
                                        <!-- <a-button class="margin-right-10" @click="filedEdit(2)">修改字段</a-button> -->
                                        <a-button class="margin-right-10" @click="filedSave">保存字段</a-button>
                                        <a-button class="margin-right-10" @click="filedDelete">删除字段</a-button>
                                    </div>
                                    <a-table :columns="filedColumns" :data-source="filedData" :row-selection="{ selectedRowKeys: selectedKeysFiled, onChange: onSelectChangeFiled,columnWidth:40 }" :scroll="{x:500,y:450}" :pagination="false" bordered>
                                        <div title="上下拖动排序" slot="sort" slot-scope="text,record,index" style="cursor: move;">{{index+1}}</div>
                                        <template slot="fieldNameEn" slot-scope="text,record,index">
                                            <a-input v-model="text" @change="changeFieldText('fieldNameEn',index,text)"></a-input>
                                        </template>
                                        <template slot="fieldNameCn" slot-scope="text,record,index">
                                            <a-input v-model="text" @change="changeFieldText('fieldNameCn',index,text)"></a-input>
                                        </template>
                                        <template slot="type" slot-scope="text,record,index">
                                            <a-input v-model="text" @change="changeFieldText('type',index,text)"></a-input>
                                        </template>
                                        <template slot="isEdit" slot-scope="text,record,index">
                                            <!--是否编辑-->
                                            <a-checkbox v-if="text" @click="changeFieldText('isEdit',index,false)" v-model="text"></a-checkbox>
                                            <a-checkbox v-else @click="changeFieldText('isEdit',index,true)" v-model="text"></a-checkbox>
                                        </template>
                                        <template slot="isNotNull" slot-scope="text,record,index">
                                            <!--必填-->
                                            <a-checkbox v-if="text" @click="changeFieldText('isNotNull',index,false)" v-model="text"></a-checkbox>
                                            <a-checkbox v-else @click="changeFieldText('isNotNull',index,true)" v-model="text"></a-checkbox>
                                        </template>
                                        <template slot="verification" slot-scope="text,record,index">
                                            <!--字段验证-->
                                            <a-input v-model="text" @change="changeFieldText('verification',index,text)"></a-input>
                                        </template>
                                        <template slot="relatedTable" slot-scope="text,record,index">
                                            <!--关联的表-->
                                            <a-input v-model="text" @change="changeFieldText('relatedTable',index,text)"></a-input>
                                        </template>
                                        <template slot="remarks" slot-scope="text,record,index">
                                            <!--说明-->
                                            <a-input v-model="text" @change="changeFieldText('remarks',index,text)"></a-input>
                                        </template>
                                        <template slot="sysStandardField" slot-scope="text,record,index">
                                            <!--系统标准字段-->
                                            <a-input v-model="text" @change="changeFieldText('sysStandardField',index,text)"></a-input>
                                        </template>
                                        <template slot="onlyAttribute" slot-scope="text,record,index">
                                            <!--唯一属性-->
                                            <a-input v-model="text" @change="changeFieldText('onlyAttribute',index,text)"></a-input>
                                        </template>
                                        <template slot="clientDisplay" slot-scope="text,record,index">
                                            <!--用户端显示-->
                                            <a-input v-model="text" @change="changeFieldText('clientDisplay',index,text)"></a-input>
                                        </template>
                                        <template slot="referenceObject" slot-scope="text,record,index">
                                            <!--引用对象-->
                                            <a-input v-model="text" @change="changeFieldText('referenceObject',index,text)"></a-input>
                                        </template>
                                        <template slot="referenceFiled" slot-scope="text,record,index">
                                            <!--引用字段名-->
                                            <a-input v-model="text" @change="changeFieldText('referenceFiled',index,text)"></a-input>
                                        </template>
                                        <template slot="referenceFiledType" slot-scope="text,record,index">
                                            <!--引用字段类型-->
                                            <a-input v-model="text" @change="changeFieldText('referenceFiledType',index,text)"></a-input>
                                        </template>

                                    </a-table>
                                </div>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane key="2" tab="数据结构" force-render>
                            <div style="height:calc(100% - 60px);overflow-y:auto;padding:10px;">
                                <a-card v-for="(item,index) in cardListData" :key="index" class="card-box" size="small" :title="`数据结构名称：${item.name}`">
                                    <div slot="extra" class="cursor" href="#">
                                        <i class="fa fa-edit margin-right-20" aria-hidden="true" @click="handleAddAndEdit(2,item)"></i>
                                        <i class="fa fa-trash" @click="handleDelete(item.id)"></i>
                                    </div>
                                    <p><span class="font-w-title">数据结构编号: </span>{{item.code}}</p>
                                    <p><span class="font-w-title">数据结构描述: </span>{{item.remarks}}</p>
                                    <p><span class="font-w-title">数据结构组成: </span>{{item.form}}</p>
                                </a-card>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane key="3" tab="数据流" force-render>
                            <div style="height:calc(100% - 60px);overflow-y:auto;padding:10px;">
                                <a-card v-for="(item,index) in cardListData" :key="index" class="card-box" size="small" :title="`数据流名称：${item.name}`">
                                    <div slot="extra" class="cursor" href="#">
                                        <i class="fa fa-edit margin-right-20" aria-hidden="true" @click="handleAddAndEdit(2,item)"></i>
                                        <i class="fa fa-trash" @click="handleDelete(item.id)"></i>
                                    </div>
                                    <p><span class="font-w-title">数据流编号: </span>{{item.code}}</p>
                                    <p><span class="font-w-title">数据流描述: </span>{{item.remarks}}</p>
                                    <p><span class="font-w-title">数据流来源: </span>{{item.dataFlowSource}}</p>
                                    <p><span class="font-w-title">数据流流向: </span>{{item.dataFlowDirection}}</p>
                                    <p><span class="font-w-title">数据流组成: </span>{{item.form}}</p>
                                    <p><span class="font-w-title">数据流量: </span>{{item.dataFlow}}</p>
                                </a-card>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane key="4" tab="数据存储" force-render>
                            <div style="height:calc(100% - 60px);overflow-y:auto;padding:10px;">
                                <a-card v-for="(item,index) in cardListData" :key="index" class="card-box" size="small" :title="`数据存储名称：${item.name}`">
                                    <div slot="extra" class="cursor" href="#">
                                        <i class="fa fa-edit margin-right-20" aria-hidden="true" @click="handleAddAndEdit(2,item)"></i>
                                        <i class="fa fa-trash" @click="handleDelete(item.id)"></i>
                                    </div>
                                    <p><span class="font-w-title">数据存储编号: </span>{{item.code}}</p>
                                    <p><span class="font-w-title">数据存储描述: </span>{{item.remarks}}</p>
                                    <p><span class="font-w-title">输入数据: </span>{{item.inputDataFlow}}</p>
                                    <p><span class="font-w-title">输出数据: </span>{{item.outputDataFlow}}</p>
                                    <p><span class="font-w-title">数据储存组成: </span>{{item.form}}</p>
                                    <p><span class="font-w-title">存储方式: </span>{{item.accessMode}}</p>
                                    <p><span class="font-w-title">存取频率: </span>{{item.accessFrequency}}</p>
                                </a-card>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane key="5" tab="处理逻辑与流程" force-render>
                            <div style="height:calc(100% - 60px);overflow-y:auto;padding:10px;">
                                <a-card v-for="(item,index) in cardListData" :key="index" class="card-box" size="small" :title="`处理逻辑名称：${item.name}`">
                                    <div slot="extra" class="cursor" href="#">
                                        <i class="fa fa-edit margin-right-20" aria-hidden="true" @click="handleAddAndEdit(2,item)"></i>
                                        <i class="fa fa-trash" @click="handleDelete(item.id)"></i>
                                    </div>
                                    <p><span class="font-w-title">处理逻辑编号: </span>{{item.code}}</p>
                                    <p><span class="font-w-title">处理逻辑描述: </span>{{item.remarks}}</p>
                                    <p><span class="font-w-title">输入的数据流: </span>{{item.inputDataFlow}}</p>
                                    <p>
                                    <div class="font-w-title"> 处理逻辑与流程:</div>
                                    <div style="border:1px solid #ccc;padding:10px;margin-top:10px;overflow:hidden" v-html="item.processingLogic"></div>
                                    </p>
                                    <p><span class="font-w-title">输出的数据流: </span>{{item.outputDataFlow}}</p>
                                </a-card>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane key="6" tab="需求文档" force-render>
                            <div class="edit-box">
                                <ueditor :content.sync="editHtml"></ueditor>
                            </div>
                        </a-tab-pane>
                    </a-tabs>

                </section>
            </section>
        </div>
        <!-- modal 弹窗  -->
        <!-- <drag-modal class="filed-table" v-model="visible" title="字段表" @cancel="cancel" width="1000px">
            <a-table :columns="filedColumns" :data-source="filedData" :row-selection="{ selectedRowKeys: selectedKeysFiled, onChange: onSelectChangeFiled,columnWidth:20 }" :scroll="{x:800,y:300}" :pagination="false" bordered>
                <div title="上下拖动排序" slot="sort" slot-scope="text" style="cursor: move;">{{text}}</div>
            </a-table>
            <template slot="footer">
                <a-button type="primary" @click="filedSave">保存</a-button>
                <a-button @click="cancel" class="margin-left-10">关闭</a-button>
            </template>
        </drag-modal> -->
        <drag-modal v-model="visible_add" :title="dragAddTitle" @cancel="cancelAdd" width="800px">
            <a-form-model class="demand-modal" :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }" @submit="handleSubmitText">
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item :label="activeKey==2?'数据结构名称':activeKey==3?'数据流名称':activeKey==4?'数据存储名称':activeKey==5?'处理逻辑名称':''" :rules="[{ required: true, trigger:'input'}]">
                            <a-input placeholder="请输入名称" v-model="requestData.name" />
                        </a-form-model-item>
                    </a-col>
                    <!--新增弹窗-->
                    <a-col :span="12">
                        <a-form-model-item :label="activeKey==2?'数据结构编号':activeKey==3?'数据流编号':activeKey==4?'数据存储编号':activeKey==5?'处理逻辑编号':''">
                            <a-input placeholder="请输入编号" v-model="requestData.code" />
                        </a-form-model-item>
                    </a-col>
                    <template v-if="activeKey == 2">
                        <a-col :span="12">
                            <a-form-model-item label="数据结构组成">
                                <a-input v-model="requestData.form" />
                            </a-form-model-item>
                        </a-col>
                    </template>
                    <template v-if="activeKey == 3">
                        <a-col :span="12">
                            <a-form-model-item label="数据流来源">
                                <a-input v-model="requestData.dataFlowSource" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="数据流流向">
                                <a-input v-model="requestData.dataFlowDirection" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="数据流组成">
                                <a-input v-model="requestData.form" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="数据流量">
                                <a-input v-model="requestData.dataFlow" />
                            </a-form-model-item>
                        </a-col>
                    </template>
                    <template v-if="activeKey == 4">
                        <a-col :span="12">
                            <a-form-model-item label="输入数据">
                                <a-input v-model="requestData.inputDataFlow" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="输出数据">
                                <a-input v-model="requestData.outputDataFlow" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="数据储存组成">
                                <a-input v-model="requestData.form" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="存储方式">
                                <a-input v-model="requestData.accessMode" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="存取频率">
                                <a-input v-model="requestData.accessFrequency" />
                            </a-form-model-item>
                        </a-col>
                    </template>
                    <template v-if="activeKey == 5">
                        <a-col :span="12">
                            <a-form-model-item label="输入的数据流">
                                <a-input v-model="requestData.inputDataFlow" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="输出的数据流">
                                <a-input v-model="requestData.outputDataFlow" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                            <div class="font-color">处理逻辑与流程:</div>
                            <div>
                                <ueditor :content.sync="requestData.processingLogic"></ueditor>
                            </div>
                        </a-col>

                    </template>
                    <a-col :span="24">
                        <div style="padding-left:0 30px;">
                            <div class="font-color">描述:</div>
                            <div>
                                <a-input v-model="requestData.remarks" placeholder="请输入描述" type="textarea" />
                            </div>
                        </div>
                    </a-col>
                </a-row>
            </a-form-model>
            <!-- <a-row>
                <a-col>

                </a-col>
            </a-row> -->
            <template slot="footer">
                <a-button type="primary" @click="handleSaveText">保存</a-button>
                <a-button @click="cancelAdd" class="margin-left-10">关闭</a-button>
            </template>
        </drag-modal>

        <!--新增修改表名弹窗-->
        <drag-modal v-model="formModal" title="新增表名" @cancel="()=>{formModal = false}" width="800px">
            <a-form-model class="demand-modal" :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                <a-row>
                    <template v-if="!isMatching">
                        <a-col :span="12">
                            <a-form-model-item label="表中文名" :rules="[{ required: true, trigger:'input'}]">
                                <a-input v-model="requestFormData.formNameCn" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="表英文名" :rules="[{ required: true, trigger:'input'}]">
                                <a-input v-model="requestFormData.formNameEn" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="表说明">
                                <a-input type="textarea" v-model="requestFormData.description" />
                            </a-form-model-item>
                        </a-col>
                    </template>

                    <a-col :span="12" v-if="isMatching">
                        <a-form-model-item label="匹配表" :rules="[{ required: true, trigger:'input'}]">
                            <a-select style="width:220px" label-in-value @change="formChange" :default-value="formChecked">
                                <a-select-option v-for="item in listFromAll" :key="item.id" :value="item.id">
                                    {{item.formNameEn}}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="formSave">保存</a-button>
                <a-button @click="()=>{formModal = false}" class="margin-left-10">关闭</a-button>
            </template>
        </drag-modal>
        <!-- 新增修改字段弹窗 -->
        <drag-modal v-model="filedModal" title="字段修改" @cancel="()=>{filedModal = false}" width="800px">
            <a-form-model class="demand-modal" :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="字段名" :rules="[{ required: true, trigger:'input'}]">
                            <a-input v-model="filedDataAlone.fieldNameEn" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="字段中文" :rules="[{ required: true, trigger:'input'}]">
                            <a-input v-model="filedDataAlone.fieldNameCn" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="字段类型">
                            <a-input v-model="filedDataAlone.type" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="是否编辑">
                            <a-radio-group v-model="filedDataAlone.isEdit">
                                <a-radio :value="'1'">
                                    是
                                </a-radio>
                                <a-radio :value="'0'">
                                    否
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="是否必填">
                            <a-radio-group v-model="filedDataAlone.isNotNull">
                                <a-radio :value="'YES'">
                                    是
                                </a-radio>
                                <a-radio :value="'NO'">
                                    否
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="关联的表">
                            <a-input v-model="filedDataAlone.relatedTable" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="字段验证">
                            <a-input v-model="filedDataAlone.verification" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="说明">
                            <a-input type="textarea" v-model="filedDataAlone.remarks" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="系统标准字段">
                            <a-input type="textarea" v-model="filedDataAlone.sysStandardField" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="唯一属性">
                            <a-input type="textarea" v-model="filedDataAlone.onlyAttribute" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="用户端显示">
                            <a-input type="textarea" v-model="filedDataAlone.clientDisplay" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="引用对象">
                            <a-input type="textarea" v-model="filedDataAlone.referenceObject" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="引用字段名">
                            <a-input type="textarea" v-model="filedDataAlone.referenceFiled" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="引用字段类型">
                            <a-input type="textarea" v-model="filedDataAlone.referenceFiledType" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="filedSaveAlone">保存</a-button>
                <a-button @click="()=>{filedModal = false}" class="margin-left-10">关闭</a-button>
            </template>
        </drag-modal>
    </div>
</template>

<script>
import ueditor from '@/components/Ueditor/index';

import {
    formApi, saveForm, deleteForm,
    fieldApi, filedSaveApi, deleteField,
    getContentApi, saveApi, listTextApi, saveTextApi, deleteTextApi, initDataFormApi,
    getListByProject
} from "@/api/research/demand";

import { components } from "@/utils/antTableComponents";
import { mapState } from 'vuex';
import Sortable from 'sortablejs';
import { getListApi } from "@/api/research/set";

export default {
    components: {
        ueditor
    },
    data () {
        return {
            //----------↓样式----------
            btnGrid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },

            editHtml: '',
            nowId: null,
            treeMenu: [],
            selectedTreeKeys: [],
            menuId: null,
            //----------↑样式----------
            columns: [{
                title: "序号",
                dataIndex: "index",
                key: "index",
                width: 40,
                align: 'center',
                customRender: (text, row, index) => {
                    return index + 1;
                }
            },
            {
                title: "表名",
                dataIndex: "formNameEn",
                key: "formNameEn",
                width: 120,
            }],
            filedColumns: [{
                title: "序号",
                dataIndex: "index",
                key: "index",
                width: 40,
                align: 'center',
                scopedSlots: { customRender: 'sort' },
            }, {
                title: "字段名",
                dataIndex: "fieldNameEn",
                key: "fieldNameEn",
                width: 120,
                align: 'left',
                scopedSlots: { customRender: 'fieldNameEn' },

            }, {
                title: "字段中文",
                dataIndex: "fieldNameCn",
                key: "fieldNameCn",
                width: 120,
                align: 'left',
                scopedSlots: { customRender: 'fieldNameCn' }
            }, {
                title: "字段类型",
                dataIndex: "type",
                key: "type",
                width: 80,
                align: 'left',
                scopedSlots: { customRender: 'type' }
            }, {
                title: "是否编辑",
                dataIndex: "isEdit",
                key: "isEdit",
                width: 80,
                align: 'center',
                scopedSlots: { customRender: 'isEdit' },
            }, {
                title: "必填",
                dataIndex: "isNotNull",
                key: "isNotNull",
                width: 80,
                align: 'center',
                scopedSlots: { customRender: 'isNotNull' },
            }, {
                title: "关联的表",
                dataIndex: "relatedTable",
                key: "relatedTable",
                width: 120,
                align: 'center',
                scopedSlots: { customRender: 'relatedTable' },
            }, {
                title: "字段验证",
                dataIndex: "verification",
                key: "verification",
                width: 120,
                align: 'center',
                scopedSlots: { customRender: 'verification' },
            }, {
                title: "说明",
                dataIndex: "remarks",
                key: "remarks",
                width: 120,
                align: 'center',
                scopedSlots: { customRender: 'remarks' },
            }, {
                title: "系统标准字段",
                dataIndex: "sysStandardField",
                key: "sysStandardField",
                width: 120,
                align: 'center',
                scopedSlots: { customRender: 'sysStandardField' },
            }, {
                title: "唯一属性",
                dataIndex: "onlyAttribute",
                key: "onlyAttribute",
                width: 120,
                align: 'center',
                scopedSlots: { customRender: 'onlyAttribute' },
            }, {
                title: "用户端显示",
                dataIndex: "clientDisplay",
                key: "clientDisplay",
                width: 120,
                align: 'center',
                scopedSlots: { customRender: 'clientDisplay' },
            }, {
                title: "引用对象",
                dataIndex: "referenceObject",
                key: "referenceObject",
                width: 120,
                align: 'center',
                scopedSlots: { customRender: 'referenceObject' },
            }, {
                title: "引用字段名",
                dataIndex: "referenceFiled",
                key: "referenceFiled",
                width: 120,
                align: 'center',
                scopedSlots: { customRender: 'referenceFiled' },
            }, {
                title: "引用字段类型",
                dataIndex: "referenceFiledType",
                key: "referenceFiledType",
                width: 120,
                align: 'center',
                scopedSlots: { customRender: 'referenceFiledType' },
            }],
            customClick: (record, index) => {
                return {
                    on: { // 点击表事件
                        dblclick: (event) => { },       // 点击行
                        click: (event) => {
                            console.log(record, index);
                            this.mouseIndex = index;
                            this.mouseId = record.id;
                            this.selectedRows = [record];
                            this.getFiledData(record.id);

                            // this.visible = true;
                        },
                        contextmenu: (event) => { },
                        mouseenter: (event) => { },  // 鼠标移入行
                        mouseleave: (event) => { }
                    },
                };
            },
            mouseId: null,
            selectedRowKeys: [],
            selectedRows: [],
            selectedKeysFiled: [],//字段表
            selectedRowsFiled: [],
            filedModal: false,
            filedDataAlone: {},
            numberReg: /^[1-9]{1}[0-9]*$/,
            floatReg: /^-?[0-9]*(\.[0-9]*)?$/,
            formData: [],
            form: '',
            menuStyle: {},
            munuTreeStyle: {},
            menuStyleStatus: true,
            editStatus: null,//数据表弹窗处于说明状态1：新增 2：修改

            activeKey: '1',
            visible: false,
            visible_add: false,
            filedData: [],//字段数据
            dragAddTitle: '新增数据文件（结构）',//弹框标题
            cardListData: [],
            requestData: {
                remarks: '',//研发工具描述
                accessFrequency: '',//存取频率
                accessMode: '',//存取方式
                alias: '',//别名	
                code: null,//编号
                dataFlow: null,//数据流量
                dataFlowDirection: null,//数据流流向
                dataFlowSource: null,//数据流来源
                form: null,//组成
                functionMenu: null,//功能菜单
                inputDataFlow: null,//输入的数据流
                name: '',//名称
                outputDataFlow: null,//输出的数据流
                processingLogic: '',//处理加工逻辑
                type: null,//类型2数据结构3数据流4数据存储5处理逻辑与流程
                remarks: '',//说明
            },
            projectData: [],
            projectChecked: null,//选中的项目

            requestFormData: {//表数据
                description: null,//表单说明
                formNameCn: null,//表单名中文
                formNameEn: null,//表单名英文
                menuIds: null,//菜单IDs
                menuNames: null,//菜单名称
                projectId: null,//项目ID
                version: null,//版本号
            },
            formModal: false,//新增修改表名弹窗


            listFromAll: [],//项目下的所有表
            isMatching: false,
            formChecked: [],
        };
    },
    computed: {
        ...mapState({
            menusMap: state => state.user.menusMap,
            menus: state => state.user.menus,
        })
    },
    watch: {
        editHtml (val) {
            console.log('_____父组件：', val)
        }
    },
    created () {
        this.components = components(this.columns);

        this.treeMenu = this.menus[0].children.filter(res => res.name == '供应链');
        this.treeTieleFun(this.treeMenu);


        console.log(this.treeMenu);
        // this.menuId = this.treeMenu[0].children[0].children[0].id;
        // this.getFormName();

        //获取项目
        this.getProjectList();
    },
    methods: {
        clickShrink () {
            this.menuStyleStatus = !this.menuStyleStatus;
            if (this.menuStyleStatus) {
                this.menuStyle = { 'flex': '0 0 250px', 'width': '250px', 'border-right': '1px solid #ccc' }
                this.munuTreeStyle = { 'display': 'block' }
            } else {
                this.menuStyle = { 'flex': '0 0 32px', 'width': '32px', 'border': 'none' }
                this.munuTreeStyle = { 'display': 'none' }
            }
        },
        treeTieleFun (data) {
            data.forEach(item => {
                item.title = item.name;
                if (item.children && item.children.length > 0) {
                    this.treeTieleFun(item.children);
                }
            });
        },
        tabsCallback (key) {
            this.activeKey = key + '';
            if (this.activeKey >= 2 && this.activeKey != 6) {
                this.getTextList();
            }
            if (this.activeKey == 6) {
                // this.editHtml = null;
                this.getContentData();
            }
        },
        rowClassName (record, index) {
            return this.mouseIndex == index ? 'hoverRowStyl' : '';
        },
        cancel () {
            this.visible = false;
        },
        onSelect (keys, rows) {
            console.log('selected', keys, rows, rows.node.dataRef);
            if (rows.selected) {
                this.filedData = [];
                this.selectedTreeKeys = keys;
                this.menuId = rows.node.dataRef.id;
                this.getFormName();
                this.activeKey = '1';
            }
        },
        projectChange (keys, rows) {
            //选择项目
            console.log(keys, rows)
            this.projectChecked = keys;

            this.formData = [];//表置空
            this.selectedRows = [];
            this.mouseIndex = null;
            this.mouseId = null;
            this.filedData = [];//字段置空
            this.selectedKeysFiled = [];
            this.selectedRowsFiled = [];
            this.menuId = null;
            this.selectedTreeKeys = [];
        },
        handleAddAndEdit (type, data) {
            //type 1:新增 2：修改
            console.log(this.activeKey);
            if (type == 1) {
                if (this.activeKey == 2) {
                    this.dragAddTitle = '数据文件'
                } else if (this.activeKey == 3) {
                    this.dragAddTitle = '数据流'
                } else if (this.activeKey == 4) {
                    this.dragAddTitle = '数据存储'
                } else if (this.activeKey == 5) {
                    this.dragAddTitle = '处理逻辑与流程'
                }
                this.requestData = {}
            } else if (type == 2) {
                this.requestData = _.cloneDeep(data);
            }
            if (this.activeKey >= 2) {
                this.visible_add = true;
            }
        },
        handleSaveText () {
            //保存card数据流等
            this.requestData.type = this.activeKey;
            this.requestData.functionMenu = this.menuId;
            this.requestData.projectId = this.projectChecked.key;

            if (!this.requestData.name) {
                this.$message.warning('名称必须输入');
                return;
            }
            saveTextApi(this.requestData).then(res => {
                if (res.code === 200) {
                    this.$message.success('保存成功');
                    this.visible_add = false;
                    this.getTextList();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        getTextList () {
            let data = {
                functionMenu: this.menuId,
                type: this.activeKey,
                projectId: this.projectChecked.key
            }
            listTextApi(data).then(res => {
                if (res.code === 200) {
                    this.cardListData = res.data;
                }
            })
        },
        cancelAdd () {
            this.visible_add = false;
        },
        handleDelete (id) {
            let _this = this;
            this.$confirm({
                title: "提示",
                content: (
                    <span>
                        是否确认删除?
                    </span>
                ),
                onOk () {
                    deleteTextApi({ id: id }).then((response) => {
                        if (response.code === 200) {
                            _this.$message.success('删除成功');
                            _this.getTextList();
                        } else {
                            // _this.$message.warning(response.message);
                        }
                    }).catch((e) => {
                        // _this.$message.error('请求出错', 1)
                    })
                },
                onCancel () { },
            });
        },
        handleSearch () {

        },
        handleSave () {
            //保存文本
            let key = parseInt(this.activeKey);
            if (this.menuId == null) {
                this.$message.warning('请选择菜单');
                return;
            }
            this.requestData = {
                catalogueId: this.menuId,
                type: key,
                id: this.nowId,
                projectId: this.projectChecked.key,
                fileName: key == 2 ? '数据结构' : key == 3 ? '数据流' : key == 4 ? '数据存储' : key == 5 ? '处理逻辑与流程' : key == 6 ? '需求文档' : '',
                content: key >= 2 ? this.editHtml : '',
            }
            //提交保存
            saveApi(this.requestData).then(res => {
                if (res.code === 200) {
                    this.$message.success('保存成功');
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        getContentData () {
            //获取edit编辑器内容
            let key = parseInt(this.activeKey);
            let reque = {
                type: key,
                catalogueId: this.menuId,
            }
            getContentApi(reque).then(res => {
                if (res.code === 200) {
                    let backData = res.data.records;
                    if (backData.length > 0) {
                        this.nowId = backData[0].id;
                        this.editHtml = backData[0].content;
                    } else {
                        this.nowId = null;
                    }
                }
            })
        },






















        //==============字段增删改查======================
        onSelectChangeFiled (keys, rows) {
            console.log(keys, rows);
            this.selectedKeysFiled = keys;
            this.selectedRowsFiled = rows;
        },
        getFiledData (id) {
            fieldApi({ formId: id }).then(res => {
                if (res.code === 200) {
                    this.filedData = res.data;
                    this.drag();
                }
            })
        },
        filedSave () {
            if (this.menuId == null) {
                this.$message.warning('请选择菜单');
                return;
            }

            //字段表保存
            let data = _.cloneDeep(this.filedData);
            data.forEach(item => {
                delete item.createdDate;
            });
            filedSaveApi(data).then(res => {
                if (res.code === 200) {
                    this.$message.success('保存成功');
                    // this.getFiledData;
                    this.getFiledData(this.mouseId);
                    // this.cancel();
                    this.filedModal = false;
                    this.selectedKeysFiled = [];
                    this.selectedRowsFiled = [];

                }
            })
        },
        filedSaveAlone () {
            if (this.filedDataAlone.fieldNameEn == null) {
                this.$message.warning('字段名称必须填写');
                return;
            }
            if (this.filedDataAlone.fieldNameCn == null) {
                this.$message.warning('字段中文名称必须填写');
                return;
            }
            if (this.editStatus == 1) {
                //新增
                this.filedDataAlone.formId = this.mouseId;
                this.filedData.push(this.filedDataAlone);
            } else {
                //修改
                this.filedData.forEach(item => {
                    if (item.id == this.filedDataAlone.id) {
                        Object.assign(item, this.filedDataAlone);
                    }
                });
            }
            this.filedSave();
        },
        filedEdit (type) {
            if (this.menuId == null) {
                this.$message.warning('请选择菜单');
                return;
            }

            if (!this.mouseId) {
                this.$message.warning('请选择表');
                return;
            }
            //字段表修改 & 字段表新增
            this.editStatus = type;
            if (type == 1) {
                //新增
                // this.filedDataAlone = {};
                this.filedModal = true;
                // this.filedDataAlone = _.cloneDeep(this.selectedRowsFiled[0]);
                // console.log(this.filedDataAlone)
            } else {
                //修改
                if (this.selectedKeysFiled.length != 1) {
                    this.$message.warning('请选择一条数据');
                    return
                }
                this.filedModal = true;
                this.filedDataAlone = _.cloneDeep(this.selectedRowsFiled[0]);
                console.log(this.filedDataAlone)
            }
        },
        filedDelete () {
            //字段表删除
            if (this.selectedKeysFiled.length != 1) {
                this.$message.warning('请选择一行删除字段');
                return;
            }
            let that = this;
            this.$confirm(
                {
                    title: '提示',
                    content: <span>是否确认删除字段?</span>,
                    okText: '确定',
                    cancelText: '取消',
                    onOk () {
                        deleteField({ id: that.selectedRowsFiled[0].id }).then(res => {
                            if (res.code === 200) {
                                that.$message.success('删除字段成功');
                                that.getFiledData(that.mouseId);
                                that.selectedKeysFiled = [];
                                that.selectedRowsFiled = [];
                            }
                        })
                    },
                    onCancel () {

                    },
                }
            )
        },
        changeFieldText (code, index, value) {
            //处理表格内直接修改内容 然后保存
            console.log(code, index, value)
            this.filedData.forEach((item, indext) => {
                if (index == indext) {
                    item[code] = value;
                }
            });

        },
        //==============字段增删改查======================





















        // 获取表名
        getFormName () {
            formApi({ menuId: this.menuId, projectId: this.projectChecked.key }).then(response => {
                if (response.code === 200) {
                    this.formData = response.data;
                    // this.data = records.map(v => {
                    //     return { ...v, key: v.id }
                    // });
                }
            }).catch(error => { });
        },
        getProjectList () {
            //获取项目
            let data = {
                size: 100,
            }
            getListApi(data).then(res => {
                if (res.code === 200) {
                    if (res.data.records.length > 0) {
                        this.projectData = res.data.records;
                        this.projectChecked = { key: this.projectData[0].id };

                        this.getListFromAll();//获取该项目下的所有表
                    } else {
                        let that = this;
                        this.$confirm(
                            {
                                title: '提示',
                                content: <span>还没有项目，去添加项目?</span>,
                                okText: '确定',
                                cancelText: '稍后去添加',
                                onOk () {
                                    that.$router.push('/research/set')
                                },
                                onCancel () {

                                },
                            }
                        )
                    }
                }
            })
        },
        initDataForm () {
            //初始化表
            initDataFormApi({ projectId: this.projectChecked.key }).then(res => {
                if (res.code === 200) {
                    this.$message.success(this.projectChecked.label + '项目，初始化表成功');
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },











        //==============表增删改查======================
        onSelectChange (keys, rows) {
            //选择表数据
            this.selectedRowKeys = keys;
            this.selectedRows = rows;
        },
        formEdit (type) {
            console.log(this.menuId);
            if (this.menuId == null) {
                this.$message.warning('请选择菜单');
                return;
            }
            //表修改
            if (type == 0) {
                //匹配表
                this.isMatching = true;//是否是匹配
                this.getListFromAll();//获取该项目下的所有表
                this.formModal = true;
            } else {
                this.isMatching = false;
            }

            if (type == 1) {
                //新增
                this.requestFormData = {};
                this.formModal = true;
            }

            if (type == 2) {
                if (this.selectedRows.length < 1) {
                    this.$message.warning('请选择一个表');
                    return
                } else {
                    this.requestFormData = this.selectedRows
                    this.formModal = true;
                }
            }
        },
        getListFromAll () {
            //获取项目下的所有表
            getListByProject({ projectId: this.projectChecked.key }).then(res => {
                if (res.code === 200) {
                    this.listFromAll = res.data;
                }
            })
        },
        formSave () {
            //表保存
            if (!this.requestFormData.formNameCn) {
                this.$message.warning('表中文名必须输入');
                return;
            }
            if (!this.requestFormData.formNameEn) {
                this.$message.warning('表英文名必须输入');
                return;
            }
            let requestData = _.cloneDeep(this.requestFormData)
            requestData.projectId = this.projectChecked.key;
            requestData.menuIds = this.menuId;

            requestData.createdDate = null;
            saveForm(requestData).then(res => {
                if (res.code === 200) {
                    this.$message.success('保存成功');
                    this.formModal = false;
                    this.getFormName();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        formDelete () {
            //表删除
            if (this.selectedRows.length != 1) {
                this.$message.warning('请选择表');
                return;
            }
            let that = this;
            this.$confirm(
                {
                    title: '提示',
                    content: <span>是否确认删除该表?</span>,
                    okText: '确定',
                    cancelText: '取消',
                    onOk () {
                        deleteForm({ id: that.selectedRows[0].id, menuId: that.menuId }).then(res => {
                            if (res.code === 200) {
                                that.$message.success('删除表成功');
                                that.getFormName();
                                that.selectedRows = [];
                            }
                        })
                    },
                    onCancel () {

                    },
                }
            )
        },
        formChange (key, row) {
            this.formChecked = key;

            this.listFromAll.forEach(item => {
                if (item.id == key.key) {
                    this.requestFormData = item;
                }
            });
            console.log(key, row, this.requestFormData)
        },
        //==============表增删改查======================

















        // 拖动
        drag () {
            // 首先获取需要拖拽的dom节点
            const el1 = document.querySelectorAll('.filed-table .ant-table-tbody')[0];
            if (!el1) return false;
            this.isDrag = true;
            Sortable.create(el1, {
                disabled: false, // 是否开启拖拽
                ghostClass: 'sortable-ghost', //拖拽样式
                animation: 150, // 拖拽延时，效果更好看
                group: { // 是否开启跨表拖拽
                    pull: false,
                    put: false
                },
                onEnd: (e) => { // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改
                    let arr = this.filedData; // 获取表数据

                    let removeItem = arr.splice(e.oldIndex, 1)[0];
                    console.log(removeItem)
                    console.log(e)

                    arr.splice(e.newIndex, 0, removeItem); // 数据处理
                    //提前 赋值一个带值的数组（BUG 修复）
                    this.filedData = [{}];
                    this.$nextTick(function () {
                        this.filedData = [...arr];
                        this.filedData.map((item, index) => {
                            item.sort = index + 1;
                            // item.isEdit = true;
                        });
                    });
                }
            });
        },
        goTo (dictType) {
            this.$router.push(`/system/dictData/list/${dictType.id}/${dictType.dictName}:${dictType.dictType}`)
        },
        syncFun () {
            this.getProjectList();
        },
    },
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';
    .content-demand-wrapper {
        height: calc(100% - 42px);
        // overflow-y: auto;
        // display: flex;
        .content-menu {
            position: relative;
            transition: all 0.5s;
            float: left;
            width: 250px;
            padding: 10px 0px;
            height: 100%;
            border-right: 1px solid #ccc;
            .shrink-btn {
                position: absolute;
                right: 0;
                top: 50%;
                width: 32px;
                height: 40px;
                line-height: 35px;
                text-align: center;
                cursor: pointer;
                z-index: 888;
            }
            .menu-tree-box {
                position: relative;
                height: 100%;
                overflow-y: auto;
            }
            .menu-btn-box {
                height: 33px;
                position: absolute;
                width: 100%;
                border-bottom: 1px solid #ccc;
                right: 0px;
                top: 0px;
                text-align: right;
            }
        }
        .content-view {
            margin: 0px;
            // height: calc(100% - 42px);
            height: 100%;
        }
        .edit-box {
            width: 900px;
            height: calc(100% - 60px);
            overflow-y: auto;
            padding: 10px;
        }
    }
    .content-view .hoverRowStyl {
        background-color: rgb(230, 247, 255);
    }
    .content-view {
        .ant-tabs-content {
            height: 100%;
        }
        .card-box {
            margin-bottom: 10px;
            width: 800px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ant-card-bordered {
            border: 1px solid #ccc;
        }
        .ant-card-head {
            border-bottom: 1px solid #ccc;
        }
        .cursor {
            cursor: pointer;
            .fa {
                font-size: 16px;
            }
            .fa:hover {
                color: #1890ff;
            }
        }
    }
    .demand-modal {
        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }
        .ant-form-item {
            margin-bottom: 0px;
        }
    }

    .font-color {
        color: rgba(0, 0, 0, 0.85);
    }
    .font-w-title {
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
    }
    .filed-table {
        .ant-input {
            border-bottom: none;
        }
    }
</style>
